<template>
    <div style="min-width:809px">
        <div class="vs-search-box" style="padding: 24px 22px 0 0px;">
            <el-form ref="form" :inline="true" :model="paging" label-width="90px">
                    <el-form-item label="" class="fl-right">
                        <el-button @click="init">重置</el-button>
                        <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                    </el-form-item>
                    <el-form-item label="岗位名称">
                        <el-input  v-model="paging.key"></el-input>
                    </el-form-item>
                    <el-form-item label="岗位等级">
                        <el-select v-model="paging.grade" clearable placeholder="请选择">
                            <el-option label="铜牌" value="铜牌"> </el-option>
                            <el-option label="银牌" value="银牌"> </el-option>
                            <el-option label="金牌" value="金牌"> </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        <div class="vs-table-box">
            <div class="operation-box clear-float">
                <el-button style="margin-left:auto;" type="primary" @click="edit(1)">新增</el-button>
            </div>
            <el-table :header-cell-style="{background:'#f5f6f8'}"  v-loading="loading" :data="tableData"  style="width: 100%">
                <el-table-column width="60px" type="selection" ></el-table-column>
                <el-table-column tprop="num" width="50" label="序号"> </el-table-column>
                <!-- <el-table-column width="60px" label="序号" type="index" ></el-table-column> -->
                <el-table-column prop="title" label="岗位名称" > </el-table-column>
                <el-table-column prop="grade" label="岗位等级"> </el-table-column>
                <el-table-column prop="content" label="岗位职责"> </el-table-column>
                <el-table-column prop="content" label="岗位类型">
                    <template slot-scope="scope">
                        {{scope.row.type | typeName}}
                    </template>
                </el-table-column>
                <el-table-column prop="store" label="门店">
                    <template slot-scope="scope">
                        {{scope.row.store.title}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" width="140" label="操作"> 
                    <template slot-scope="scope">
                        <!-- <span class="tab-huang-text" @click="$router.push(`/staffbution?type=3&name=${scope.row.title}&id=${scope.row.id}` ) " >配置权限</span> -->
                        <span class="tab-table-text" @click="edit(2,scope.row)">编辑</span>
                        <span class="tab-red-text" @click="edit(3,scope.row)">删除</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="vs-paging-box">
                <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="paging.page"
                    :page-size="paging.limit"
                    layout="prev, pager, next, jumper"
                    :total="paging.total">
                </el-pagination>
            </div>
        </div>
        <el-dialog
        :title="ruleForm.id?'编辑岗位管理':'新增岗位管理'"
        :visible.sync="dialogVisible"
        :before-close="handleClose"
        :close-on-click-modal="false"
        width="570px">
            <el-form label-position="top" :rules="rules" ref="ruleForm"  label-width="80px" :model="ruleForm">
                <el-form-item label="岗位名称" prop="title">
                    <el-input v-model="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="岗位等级" prop="grade1">
                    <!-- <el-input v-model="ruleForm.grade"></el-input> -->
                    <el-select v-model="ruleForm.grade" clearable  placeholder="请选择">
                        <el-option label="铜牌" value="铜牌"> </el-option>
                        <el-option label="银牌" value="银牌"> </el-option>
                        <el-option label="金牌" value="金牌"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位类型" prop="type">
                    <!-- <el-input v-model="ruleForm.grade"></el-input> -->
                    <el-select v-model="ruleForm.type" clearable  placeholder="请选择">
                        <el-option label="店长" :value="1"> </el-option>
                        <el-option label="前台" :value="2"> </el-option>
                        <el-option label="技师" :value="3"> </el-option>
                        <el-option label="办公室员工" :value="4"> </el-option>
                        <el-option label="其他" :value="10"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="岗位职责" prop="content2">
                    <el-input v-model="ruleForm.content"  type="textarea" :rows="4" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose()">取消</el-button>
                <el-button type="primary" :loading="isBtn" @click="subitm()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible:false,
            options: [
                {
                    value: '正大店',
                    label: '正大店'
                }
            ],
            paging:{
                key:'',
                grade:'',
                page:1,
                total:0,
                limit:10,
            },
            isBtn:false,
            loading:false,
            tableData: [],
            ruleForm:{
                title:'',
                grade:'',
                content:'',
                type:'',
            },
            rules: {
                title: [ { required: true, message: '请输入岗位名称', trigger: 'blur' }, ],
                grade: [ { required: true, message: '请选择岗位等级', trigger: 'blur' }, ],
                content: [ { required: true, message: '请选择岗位职责', trigger: 'change' }, ],
                type: [ { required: true, message: '请选择岗位类型', trigger: 'change' }, ],
            },
        };
    },
    filters:{
        typeName(val){
            switch (val) {
                case 1:
                    val = '店长'
                    break;
                case 2:
                    val = '前台'
                    break;
                case 3:
                    val = '技师'
                    break;
                case 4:
                    val = '办公室员工'
                    break;
                case 10:
                    val = '其他'
                    break;
            }
            return val;
        }
    },
    created() {
        this.getList();
    },
    methods: {
        subitm(){
            this.$refs.ruleForm.validate(async (valid)=>{
                if(!valid)return;
                this.isBtn = true;
                let obj = Object.assign({},this.ruleForm);
                let {code,data} = await this.$Http.positionSave(obj);
                this.isBtn = false;
                if(code){
                    this.$message.success(obj.id?'修改成功':'添加成功');
                    this.handleClose()
                    this.getList();
                }
            })
        },
        init(){
            this.paging = this.$options.data().paging;
            this.getList();
        },
        handleCurrentChange(val){
            this.paging.page = val;
            this.getList()
        },
        async getList(){
            this.loading = true;
            let {code,data} = await this.$Http.getPosition(this.paging);
            this.loading = false;
            if(code){
                this.tableData = data.data;
                this.paging.total = data.total;
            }
        },
        edit(type,row){
            if(type == 1){//新增
                this.dialogVisible = true
            }else if(type == 2){//编辑
                this.dialogVisible = true
                setTimeout(() => {
                    this.ruleForm = {
                        id:row.id,
                        title:row.title,
                        grade:row.grade,
                        content:row.content,
                        type:row.type
                    }
                }, 200);
            }else{//删除
                this.$msgbox({
                    title: '提示',
                    message: '确定要删除该岗位吗?',
                    type: 'warning',
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    beforeClose:async (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        let {code,data} = await this.$Http.positionDel({ids:String(row.id)})
                            if(code){
                                this.$message.success('删除成功!');
                                this.handleCurrentChange(1)
                            }
                            done();
                            instance.confirmButtonLoading = false;
                        } else {
                            done();
                        }
                    }
                }).then(action => {

                }).catch(()=>{});
            }
        },

        pickerDate(){

        },
        change(){

        },
        handleClose(dom){
            this.ruleForm = this.$options.data().ruleForm;
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
            dom&&dom();
        },
    },
};
</script>

<style lang="scss" scoped>

</style>